﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fhdb" content="true">
    <title>收银台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/cashier.css?v=2026">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="phoneError">
    </div>
    <div class="backBox" onclick="javascript:history.back(-1);">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </div>
    <div class="topTitle">
        收银台
    </div>
    <!-- 订单信息 -->
    <div class="orderInformation">
        <div>
            <span>订单编号</span> <span id="TB_NUMBER"></span>
        </div>
        <div class="lines">
        </div>
        <div>
            <span>订单金额</span> <span id="TB_PRICE"></span>
        </div>
        <div class="lines">
        </div>
        <div>
            <span>产品所有人</span> <span id="TB_SELLER_NAME"></span>
        </div>
        <div class="lines">
        </div>
        <div>
            <span>卖家手机号</span> <span id="TB_PHONE"></span>
        </div>
        <div class="lines">
        </div>
        <div>
            <span>卖家支付宝账号</span> <span class="center1" id="TB_ZFB_NUMBER"></span>
        </div>
        <div class="lines">
        </div>
        <div>
            <span>卖家支付宝姓名</span> <span class="center" id="TB_ZFB_USERNAME"></span>
        </div>
        <div class="lines">
        </div>
        <div>
            <span>卖家所属银行</span> <span class="center" id="TB_BACKNAME"></span>
        </div>
        <div class="lines">
        </div>
        <div>
            <span>卖家银行卡号</span> <span class="center" id="TB_BACKCARD"></span>
        </div>
    </div>
    <!-- 提示 -->
    <div class="payInformation">
        <div class="tip">
            风险提示：资金不经过平台，平台不会自动扣款，需您手动自行转给对方。请将藏品款项通过一下支付方式转账给产品所有人，注意核对订单编号， 金额和所有人姓名。支付凭证与实际金额不匹配,平台将做封停帐号处理。
        </div>
        <div class="big-navBox">
            <div class="navBox obligation">
                <div id="zfb">
                    支付宝转账付款
                </div>
                <div class="underLine underLineAll">
                </div>
            </div>
            <div class="fenge">
                |
            </div>
            <div class="navBox">
                <div id="wx">
                    微信转账付款
                </div>
                <div class="underLine">
                </div>
            </div>
            <div class="line">
            </div>
            <p class="gray">
                请保存下方二维码，并用支付宝扫一扫
            </p>
            <img alt="" id="zfbAndWx">
        </div>
        <p>
            上传支付凭证
        </p>
        <div class="line">
        </div>
        <!-- 上传图片 -->
        <div class="productDrawingBox">
            <div class="productImg">
                <div id="uploadBox">
                </div>
                <div class="uploadDIv">
                    <span>+</span><input type="file" name="file" multiple id="inputs" accept="image/*"
                                         class='fileTest' multiple="multiple" />
                </div>
            </div>
        </div>
        <div class="blank">
        </div>
        <div class="paySuccess">
            我已完成付款
        </div>
    </div>
    <!-- 遮罩层 -->
    <div class="cover">
    </div>
    <img src="" alt="" class="bigPicture">
</body>
<script>
    var id = getUrlParam('id');
    $(function () {
        $.ajax({
            type: "post",
            data: { ID: id },
            url: "../../BaseRefWeb.aspx?stype=ISpOrderFun&method=GetCashier&type=sp",
            success: function (result) {
                var data = JSON.parse(result);
                if (data.msg == "_timeout") {
                    window.location.href = "../UserLogin/Login.html";
                }
                else {
                    $("#TB_NUMBER").text(data[0].TB_NUMBER);
                    $("#TB_PRICE").text("￥" + data[0].TB_PRICE);
                    $("#TB_SELLER_NAME").text(data[0].TB_SELLER_NAME); 
                    $("#TB_PHONE").text(data[0].TB_PHONE); 
                    $("#TB_ZFB_NUMBER").text(data[0].TB_ZFB_NUMBER);
                    $("#TB_ZFB_USERNAME").text(data[0].TB_ZFB_USERNAME);
                    $("#TB_BACKCARD").text(data[0].TB_BACKCARD);
                    $("#TB_BACKNAME").text(data[0].TB_BACKNAME);
                    $("#zfbAndWx").attr("src", "../../" + data[0].TB_ZFB_FILEPATH)
                    $(".bigPicture").attr("src", "../../" + data[0].TB_ZFB_FILEPATH)
                    // 微信支付宝切换
                    $('.big-navBox').on('click', '.navBox', function () {
                        const $this = $(this)
                        const index = $this.index()
                        $this.addClass('obligation').siblings().removeClass('obligation')
                        $(".underLine").removeClass('underLineAll')
                        $this.children('.underLine').addClass('underLineAll')
                        var id = $this.children('div:first').attr('id')
                        if (id == "wx") {
                            $(".gray").text("请保存下方二维码，并用微信扫一扫")
                            $("#zfbAndWx").attr("src", "../../" + data[0].TB_WX_FILEPATH)
                            $(".bigPicture").attr("src", "../../" + data[0].TB_WX_FILEPATH)
                        }
                        else {
                            $(".gray").text("请保存下方二维码，并用支付宝扫一扫")
                            $("#zfbAndWx").attr("src", "../../" + data[0].TB_ZFB_FILEPATH)
                            $(".bigPicture").attr("src", "../../" + data[0].TB_ZFB_FILEPATH)
                        }
                    })
                }
            }
        });
    })
    var img = []; //创建一个空对象用来保存传入的图片
    $(document).ready(function () {
        // 上传图片
        $(function () {
            var AllowImgFileSize = '101376'; //1兆
            $("#inputs").change(function () {
                img = []
                var fil = this.files;
                for (var i = 0; i < fil.length; i++) {
                    var curr = $('#inputs')[i].files[0].size;
                    if (curr > AllowImgFileSize * 101376) { //当图片大于1兆提示
                        layer.msg("图片文件大小超过限制 请上传小于99M的文件");
                    } else {
                        reads(fil[i]);
                        img.push($('#inputs')[i].files[0]); //将传入的图片push到空对象中
                    }
                }
            });

            function reads(fil) {
                var reader = new FileReader();
                reader.readAsDataURL(fil);
                reader.onload = function () {
                    document.getElementById("uploadBox").innerHTML = "<div class='divImg' id='uploadImg'><img src='" + reader.result + "' class='imgBiMG'></div>";
                }
            }
        })

        $("#zfbAndWx").click(function () {
            $(".cover").toggle()
            $(".bigPicture").toggle()
        })
        $(".cover").click(function () {
            $(".cover").toggle()
            $(".bigPicture").toggle()
        })
    });
    $(".paySuccess").click(function () {
        if (img[0] != undefined) {
            var formData = new FormData();
            formData.append('ID', id);
            formData.append('state', "3");
            formData.append('pz', img[0]);
            console.log(formData);
            $.ajax({
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                url: "../../BaseRefWeb.aspx?stype=ISpOrderFun&method=DoWebEdit&type=sp",
                success: function (result) {
                    var data = JSON.parse(result);
                    if (data.msg == "_timeout") {
                        window.location.href = "../UserLogin/Login.html";
                    }
                    else {
                        $('.phoneError').text("提交成功！");
                        var top = ($(window).height() - $('.phoneError').height()) / 2;
                        var left = ($(window).width() - $('.phoneError').width()) / 2;
                        var scrollTop = $(document).scrollTop();
                        var scrollLeft = $(document).scrollLeft();
                        $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                        setTimeout(function () {
                            location.href = 'order.html';
                        }, 1000)
                    }
                }
            });
        }
        else {
            $('.phoneError').text("支付凭证不许为空！");
            var top = ($(window).height() - $('.phoneError').height()) / 2;
            var left = ($(window).width() - $('.phoneError').width()) / 2;
            var scrollTop = $(document).scrollTop();
            var scrollLeft = $(document).scrollLeft();
            $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
            setTimeout(function () {
                $('.phoneError').hide();
            }, 1000)
        }
    })
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
</script>
</html>
